import 'package:flutter/material.dart';

main() => runApp(const FlexWidget());

class FlexWidget extends StatelessWidget {
  const FlexWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Test',
        home: Scaffold(
            appBar: AppBar(title: const Text('Flutter 布局Widget -- 弹性布局')),
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const SizedBox(
                  width: 30.0,
                  height: 30.0,
                ),
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Flexible(
                      child: Container(
                        color: Colors.yellow,
                        child: const Text('使用 Flexible 来包裹 子Widget'),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  width: 30.0,
                  height: 30.0,
                ),
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        color: Colors.yellow,
                        child: const Text('使用 Expanded 来包裹 子Widget'),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  width: 30.0,
                  height: 30.0,
                ),
                const Text('三个 Flexible 的 flex：1:2:1'),
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Flexible(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.yellow,
                      ),
                    ),
                    Flexible(
                      flex: 2,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.green,
                      ),
                    ),
                    Flexible(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.blue,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  width: 30.0,
                  height: 30.0,
                ),
                const Text('三个 Expanded 的 flex：1:2:1'),
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.yellow,
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.green,
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.blue,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  width: 30.0,
                  height: 30.0,
                ),
                const Text('三个 Expanded 的 flex：1:1:1'),
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.yellow,
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.green,
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        width: 30.0,
                        color: Colors.blue,
                      ),
                    ),
                  ],
                ),
              ],
            )));
  }
}
